<template>
  <div>
    <van-nav-bar fixed title="邀请名额" left-arrow @click-left="$utils.back($route.path)" />
    <div class="has-top" v-if="show">
      <div class="pos-r">
        <div class="bg-white invite_top clearfix">
          <div>
            <div class="flex-s-c h132" v-for="item in inviteList">
              <div class="name">{{item.InviteGradeName}}</div>
              <div class="flex-v-c">
                <div class="flex-d-c flex-center">
                  <span>已邀请名额/全部名额</span>
                  <div class="num"><span>{{item.InviteCount}}</span>/<font>{{item.TotalInviteCount}}</font></div>
                </div>
              </div>
              <div class="pos-r go">
                <button class="por-r" :disabled="item.InviteCount >= item.TotalInviteCount" @click="poster(item.InviteGradeId)">立即邀请</button>
              </div>
            </div>
          </div>

          <!-- <div>
            <div class="fs-44 fw-b pl-34 ptb-35">市代</div>
            <div class="flex-s-c h132">
              <div class="flex-v-c">
                <div class="flex-d-c flex-center pl-60">
                  <span>已邀请名额</span>
                  <strong class="colback fs-54">20</strong>
                </div>
                <div class="flex-d-c flex-center pl-60">
                  <span>剩余邀请名额</span>
                  <strong class="colorange fs-54">20</strong>
                </div>
              </div>
              <div class="pos-r go orange">
                <img src="@/assets/images/invitePlaces2.png" class="crown crown1" />
                <div class="por-r" @click="posterShow = true">立即邀请</div>
              </div>
            </div>
          </div> -->
        </div>
        <div class="invite_bottom pl-24 pr-24">
          <div class="pt-40 pb-30 flex-s-c">
            <div class="fs-28">邀请记录<span class="fs-24 col666" v-if="recordAmout > 0">(共{{recordAmout}}条)</span></div>
            <div class="flex-center class_select" @click="showPicker = true">{{ value }}<van-icon name="arrow-down" class="fs-30" /></div>
          </div>
          <div class="list pb-50" v-if="list.length !== 0">
            <div v-for="item in list">
              <div class="flex-v-c">
                <headPortraitBox class="is-72 flex-s-0 mr-15" :head-portrait-url="item.UserFace" />
                <div>
                  <div class="fs-28 text-show-line-1">{{item.NickName}}({{item.InviteUserId}})</div>
                  <span class="fs-28">{{item.InviteTime}}</span>
                </div>
              </div>
              <div class="colblue fs-32 fw-b">{{item.AfterGradeName}}</div>
            </div>
            <!-- <div>
              <div class="flex-v-c">
                <headPortraitBox class="is-72 flex-s-0 mr-15" :head-portrait-url="img" />
                <div>
                  <div class="fs-28">好实用会员(123123213)</div>
                  <span class="fs-28">2020-07-09 09:32:36</span>
                </div>
              </div>
              <div class="colorange fs-32 fw-b">市代</div>
            </div> -->
          </div>
          <no-data v-else/>
        </div>
      </div>
    </div>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
    </van-popup>
		<!--<canvas id="my_canvas" width="800px" height="1422px" style="opacity: 0;"></canvas>-->
		<canvas id="my_canvas" width="628px" height="870px" style="opacity: 0;"></canvas>
				
    <van-dialog v-model="posterShow" class="posterDiv color-white" :showConfirmButton="false">
        <SvgIcon icon-class="close" class="fs-70 pos-a closecss z-out" @goPage="posterShow = false" />
        <img src="@/assets/images/shou.png" class="share_shou" />
				<!--<canvas id="my_canvas" width="300px" height="534px" hidden></canvas>-->
				<!--<canvas id="my_canvas" width="800px" height="1422px" v-if="!final_img"></canvas>
				<div style="transform: scale(0.8,0.8);width: 100%;"><img :src="final_img" class="newImage" v-if="final_img" id="newImage"></div>-->
        <!--<div  ref="canvas">-->
					<div style="transform: scale(0.8,0.8);width: 100%;"><img :src="final_img" class="newImage" v-if="final_img" id="newImage"></div>
        
         
          <!--<div>长按二维码保存图片分享给好友</div>-->
					
        <!--</div>-->
    </van-dialog>
    <van-dialog v-model="unqualified" class="color-white" :showConfirmButton="true" @confirm="returnprev">
      <div class="no_invite">您无邀请名额，确定返回上一页。</div>
    </van-dialog>
    
  </div>
</template>

<script>
import SvgIcon from 'components/SvgIcon'
import noData from 'components/noData'
import jrQrcode from "jr-qrcode";
import headPortraitBox from 'components/headPortraitBox'
import { GetUserInviteQuotaList,GetUserInviteRecordList,GetInviteQuotaQRCode,GetMemberGradeList } from 'api/member'
import { Popup } from 'vant'
import html2canvas from 'html2canvas'
//import posterBgImg from '../../assets/images/luyi-share.png'
import posterBgImg from '../../assets/images/share_bg.png'
export default {
  components: {
    SvgIcon,
    noData,
    headPortraitBox
  },
  data() {
    return {
      show:false,
      unqualified:false,
      img: '',
      ewm:'',
      link:'',
      posterShow:false,
      value: '全部等级',
      requestData: {
        gradeId:0,
        PageIndex: 1,
        PageSize: 20
      },
      // 滚动状态
      recordAmout:0,
      totalAmout: 0,
      scollRequest: true,
      end: false,
      showPicker: false,
      columns: [
        {"keyId":0,"text":"全部等级"},
        ],
      inviteList: [],
      datalist: [],
      list: [], //列表数据
			posterBgImg,
			final_img: ''
    }
  },
  computed: {
    // 计算属性的 getter
		screenWidth(){
			let w = document.body.clientWidt || document.documentElement.clientWidth || 375;
			return w > 480 ? 480 : w ;
		}
  },
  created() {
    // this.GetMyInviteUserInfo()
  },
	mounted() {
    this.GetUserInviteQuotaList()
    setTimeout(() => {
        function onBridgeReady() {
            WeixinJSBridge.call('hideOptionMenu');
        }
 
        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
         } else {
             onBridgeReady();
         }
    },500)
  },
  methods: {
		
    returnprev(){
      this.$utils.back()
    },
    poster(id){
      var path = '?gradeId='+id;
      GetInviteQuotaQRCode({},path).then(res => {
        if (res) {
          this.ewm = res.Data.QRCode;
          this.link = res.Data.Link;
        	
          // this._creatQrCode(res.Data)
						this.replaceToImg()
					
          // this._setshare()
          // this.$utils.hideMenuItems()
        }
      })
    },
		
		 replaceToImg() {
			let that = this
     
        let canvas = document.getElementById('my_canvas')
        let ctx = canvas.getContext('2d')
        let img1 = new Image()
        // 处理跨域
        img1.crossOrigin = 'anonymous'
        //img1.src = require('../../assets/images/luyi-share.jpeg')
				img1.src = that.posterBgImg
				console.log(img1,"二维码")
				img1.onload = function() {
					//ctx.drawImage(img1, 0, 0, 800, 1422) // 背景图载入画板（luyi-share.png背景图下的）
					ctx.drawImage(img1, 0, 0, 628, 870) // 背景图载入画板
					console.log("img1")
					
					let img2 = new Image()
					img2.crossOrigin = 'anonymous'
					img2.src = that.ewm // 生成的二维码base64
					img2.onload = function() {
						console.log("img2")
						//ctx.drawImage(img2, 275, 560, 251, 251) (luyi-share.png背景图下的)
						ctx.drawImage(img2, 90, 300, 451, 451)
						that.final_img = canvas.toDataURL('image/png',1)
						that.posterShow = true
        	}
				
				}
					
				
    },
		generateQR (text) {
      return QRCode.toDataURL(text)
    },
		//drawImage(images) {
		//	console.log("sss")
		//	const canvas = this.$refs.canvas
		//	const ctx = canvas.getContext('2d')
		//	
		//	images.forEach((img, index) =>{
		//	ctx.drawImage(img, 0, 0, canvas.width / images.length, canvas.height, index * canvas.width / images.length, 0, canvas.width / images.length, canvas.height)
		//	})
		//},
    _setshare(){
      wx.onMenuShareAppMessage({
        link: this.link, //
        success: function () {
        },
        cancel: function () {
          // 用户取消分享后执行的回调函数
        }
      });
      wx.onMenuShareTimeline({
        link: this.link, //
        success: function () {
        },
        cancel: function () {
          // 用户取消分享后执行的回调函数
        }
      });
    },
    _creatQrCode(url) {
      this.$nextTick(()=>{
        let imgBase64 = jrQrcode.getQrBase64(url, {//生成二维码
          padding       : 0,   // 二维码四边空白（默认为10px）
          width         : 140,  // 二维码图片宽度（默认为256px）
          height        : 140,  // 二维码图片高度（默认为256px）
          correctLevel  : QRErrorCorrectLevel.H,    // 二维码容错level（默认为高）
          reverse       : false,        // 反色二维码，二维码颜色为上层容器的背景颜色
          background    : "#ffffff",    // 二维码背景颜色（默认白色）
          foreground    : "#000000"     // 二维码颜色（默认黑色）
        });  //options为配置对象，支持以下配置参数：
        this.ewm = imgBase64;				
      })
    },
    onConfirm(value) {
      this.value = value.text;
      this.requestData.gradeId = value.keyId;
      this.showPicker = false;
      this.requestData.PageIndex = 1;
      this.totalAmout = 0
      this.scollRequest = true
      this.end = false
      this.list = [];
      this.datalist = [];
      this.GetUserInviteRecordList();
    },
    look() {
      ImagePreview({
        images: [this.$webInfo.ImgDomain + this.data.ServiceWX],
        showIndex: false
      })
    },
    GetUserInviteQuotaList() {
      GetUserInviteQuotaList().then(res => {
        if (res) {
          this.inviteList = res.Data;
          if(res.Data.length > 0){
            this.show = true;
            this.GetMemberGradeList();
            this.GetUserInviteRecordList();
          }else{
            this.unqualified = true;
          }
        }
      })
    },
    GetMemberGradeList(){
      GetMemberGradeList().then(res => {
     if (res) {
          let inviteList = res.Data;
            inviteList.forEach((item) => {
              this.columns.push({
                keyId:item.ID,
                text:item.Name
              })
            })
        }
      })
    },
    GetUserInviteRecordList(){
      GetUserInviteRecordList(this.requestData).then(res => {
        if (res && res.Data.Data && res.Data.Data.length > 0) {
          this.datalist = this.datalist.concat(res.Data.Data);
          console.log(this.datalist)
          var list = this.datalist;
          this.list = list;
          this.totalAmout = res.Data.TotalAmout
          this.recordAmout = res.Data.RecordAmout
          this.scollRequest = true
        }
      })
    },
    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
      if (_this.scollRequest === true) {
        if (_this.$utils.getScrollHeight() - _this.$utils.getClientHeight() - _this.$utils.getScrollTop() <= 5) {
          _this.scollRequest = false
          if (_this.requestData.PageIndex < _this.totalAmout) {
            _this.requestData.PageIndex++
            _this.GetUserInviteRecordList()
          } else {
            _this.end = true
          }
          // }
        }
      }
    }
  },
  
}
</script>
<style lang="scss" scoped>
.clearfix:before,.clearfix:after{content:""; display:table;}
.clearfix:after{clear:both;}
.clearfix{zoom:1;}
.invite_top {
  padding: 24px;
  border-radius: 42px;
  .fs-44 {
    color: #43485c;
  }
  .name{
    font-size: 36px;
    font-weight: bold;
    color: #43485C;
    width: 150px;
    margin-left: 20px;
    text-align: center;
    text-align: center;
  }
  .num{
    font-size: 22px;
    font-weight: 500;
    color: #43485C;
    margin-left: -20px;
    span{
      font-size: 54px;
      font-weight: 500;
      color: #2CD334;
      padding-right: 20px;
    }
    font{
      padding-left: 20px;
    }
  }
}
.invite_top > div {
  border-radius: 30px;
  padding: 32px 22px;
  background: linear-gradient(135deg, #EEF7FE, #E7F5FF);
  .h132{
    margin-bottom: 32px;
  }
  .h132:last-child{
    margin-bottom: 0;
  }
}
.crown {
  position: absolute;
  width: 177px;
  height: 170px;
  top: -170px;
  left: -30px;
  z-index: 0;
}
.crown1 {
  width: 203px;
  height: 149px;
  top: -149px;
}
.h132 {
  height: 132px;
  border-radius: 66px;
  background: #ffffff;
  font-size: 20px;
  color: #7a7a7a;
}
.colback {
  color: #1f2758;
  font-weight: 500;
}
.colblue {
  color: #000000;
  font-weight: 500;
}
.colorange {
  color: #ffae45;
  font-weight: 500;
}
.h132 span {
  padding-top: 20px;
  margin-bottom: -5px;
}
.go {
 
  button{
  width: 162px;
  height: 60px;
  font-size: 26px;
  color: #ffffff;
  background: #2CD334;
  box-shadow: 0px 3px 18px 0px rgba(11, 42, 131, 0.13);
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 32px;
  }
  button[disabled]{
    background: #abedae;
  }
}
.posterDiv {
  width: 100%;
  //height: 1067px;
  background: none;
  overflow: visible;
  //background: url('../../assets/images/luyi-share.png') no-repeat;
  background-size: 100% 100%;
  border-radius: 0;
  top: 45%;
}
.orange {
  background: #ffae45;
}
.invite_bottom {
  color: #000;
  .class_select {
    padding: 0 24px;
    height: 52px;
    background: #ebebeb;
    border-radius: 26px;
    color: #333;
  }
}
.col666 {
  color: #666;
}
.list > div {
  height: 136px;
  background: #ffffff;
  border-radius: 52px;
  margin-bottom: 12px;
  padding: 32px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333;
  span {
    color: #999;
  }
  .fw-b {
    font-weight: bold;
  }
}
.closecss{
  bottom: -110px;
  left: 50%;
  margin-left: -35px;
}
.share_shou{
  width: 188px;
  height: 205px;
  position: absolute;
  right: -28px;
  top: -75px;
  display: none;
}
.poster_main{
  text-align: center;
  padding-top: 420px;
  img{
    width: 190px;
    height: 190px;
    //margin-bottom: 50px;
  }
  p{
    font-size: 28px;
    color: #F54F1B;
    padding: 30px 0;
    font-weight: 500;
  }
  div{
     font-size: 26px;
    color: #000000;
    font-weight: 400;
  }
}
.no_invite{
  text-align: center;
  padding: 80px 0;
  font-size: 32px;
  color: #000;
}
.text-show-line-1{
  max-width: 400px;
}
/deep/.closecss {
	bottom: 0;
}
#my_canvas{
	position: fixed;
	left: -1600px;
}
</style>
